<template>
  <div class="mod-config">
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="登录手机号" prop="loginAccount">
          <el-input
            v-model.trim="queryParams.loginAccount"
            placeholder="请输入登录手机号"
            clearable
            size="small"
            @keyup.enter.native="getDataList"
          />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input
            v-model.trim="queryParams.realName"
            placeholder="请输入真实姓名"
            clearable
            size="small"
            @keyup.enter.native="getDataList"
          />
        </el-form-item>


        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getDataList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading">
          <el-table-column
            type="index"
            header-align="center"
            :index="indexMethod"
            align="center"
            label="编号"
            fixed="left"
          >
          </el-table-column>
          <el-table-column
            prop="loginAccount"
            header-align="center"
            align="center"
            label="登录手机号"
            fixed="left"
            width="120px"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="头像"
          >
            <template slot-scope="scope">
              <el-avatar icon="el-icon-user-solid" :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            header-align="center"
            align="center"
            label="用户昵称"
            width="120px"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="realName"
            header-align="center"
            align="center"
            label="真实姓名"
            width="120px"
          >
          </el-table-column> -->
          <el-table-column
            prop="promotionChannelName"
            header-align="center"
            align="center"
            label="推广渠道"
            width="120px">
          </el-table-column>
          <el-table-column
            prop="realName"
            header-align="center"
            align="center"
            label="注册渠道"
            width="120px"
          >
            <template slot-scope="{row}">
              <span>{{platformNameEnum[row.platform]}}</span>
            </template>
          </el-table-column>

          <el-table-column label="关联销售代表详情" align="center" prop>
            <el-table-column
              prop="salesUserloginAccount"
              header-align="center"
              align="center"
              label="销售代表账号"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="salesUserNickName"
              header-align="center"
              align="center"
              label="销售代表昵称"
              width="150px"
            >
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="pointBalance"
            header-align="center"
            align="center"
            label="当前积分">
          </el-table-column>

          <el-table-column
            prop="cashBalance"
            header-align="center"
            align="center"
            label="当前余额"
            :formatter="formatMoney">
          </el-table-column>

          <el-table-column
            prop="invitedCode"
            header-align="center"
            align="center"
            label="邀请码">
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            label="注册来源">
            <template slot-scope="{row}">
              <span v-if="row.registerSource == registerSourceEnum.manual">手动注册</span>
              <span v-else>excel导入</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="注册时间"
            width="220px"
          >
          </el-table-column>
          
          <el-table-column header-align="center" align="center" label="操作" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="permissions.shop_user_edit"
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="handleGiveCoupon(scope.row)"
                >赠券</el-button
              >

              <el-button
                v-if="permissions.shop_user_edit"
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="handleShowUserCouponList(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="queryParams.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>

      <GiveCoupon
        v-if="visibleGiveCoupon"
        ref="giveCouponForm"
        @refreshDataList="getDataList"
        :visible.sync="visibleGiveCoupon"
      ></GiveCoupon>

      <UserCouponList
        v-if="visibleUserCouponList"
        ref="userCouponListForm"
        @refreshDataList="getDataList"
        :visible.sync="visibleUserCouponList"
      ></UserCouponList>

    </basic-container>

  </div>
</template>

<script>
import { fetchList } from "@/api/shop_user/user";
import GiveCoupon from './give_coupon.vue';
import UserCouponList from './coupon_list.vue';
import { mapGetters } from "vuex";
import {shopUserTypeEnum, platformNameEnum, registerSourceEnum} from '@/const/const';

export default {
  data() {
    return {
      shopUserTypeEnum,
      platformNameEnum,
      registerSourceEnum,
      dataForm: {
        key: "",
      },
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        loginAccount:'',
        realName:'',
        shopUserType:shopUserTypeEnum.normal
      },
      dataList: [],

      totalPage: 0,
      dataListLoading: false,
      visible: false,
      visibleGiveCoupon:false,
      visibleUserCouponList:false
    };
  },
  components: {
    GiveCoupon,
    UserCouponList
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    /**
     * 获取数据列表
     */
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          shopUserType: this.queryParams.shopUserType,
          loginAccount: this.queryParams.loginAccount,
          current: this.queryParams.pageIndex,
          size: this.queryParams.pageSize,
          realName: this.queryParams.realName
        })
      ).then((response) => {
        this.dataListLoading = false;
        let data = response.data.data.records;
        data.forEach(item=>{
          if(item.salesUserList.length > 0){
            this.$set(item, 'salesUserloginAccount', item.salesUserList[0].loginAccount)
            this.$set(item, 'salesUserNickName', item.salesUserList[0].nickName)
          }
          if(item.shopUserInfo){
            this.$set(item, 'pointBalance', item.shopUserInfo.pointBalance)
            this.$set(item, 'cashBalance', item.shopUserInfo.cashBalance)
          } else {
            this.$set(item, 'pointBalance', '0')
            this.$set(item, 'cashBalance', '0')
          }
        })
        this.dataList = data
        this.totalPage = response.data.data.total
      });
    },

    /**
     * 每页数
     */
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    /**
     * 新增 / 修改
     */
    addOrUpdateHandle(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

    /**
     * 赠送优惠券
     */
    handleGiveCoupon(row){
      this.visibleGiveCoupon = true
      this.$nextTick(() => {
        this.$refs.giveCouponForm.init(row);
      });
    },

    /**
     * 查看用户所有优惠券
     */
    handleShowUserCouponList(row){
      this.visibleUserCouponList = true
      this.$nextTick(() => {
        this.$refs.userCouponListForm.init(row);
      });
    },

    /**
     * 重置
     */
    resetQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },
  },
};
</script>
